﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Logs日志</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
    <div class="page-header">
        <h1 class="text-center">Logs<small>日志记录</small></h1>
    </div>

    <div class="col-md-12">
        <div class="col-md-3">
            <div class="col-md-1">
                <div class="btn-group-vertical" role="group" aria-label="...">
                    <button type="button" class="btn btn btn-default" onclick="getdata()">刷新</button>
                    <button type="button" class="btn btn btn-default" onclick="maxid = 0;getdata()">获取20条</button>
                    <button type="button" class="btn btn btn-default" onclick="$('#msg').html('')">清除</button>
                </div>
            </div>
        </div>
        <div class="col-md-9">


            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Debug</a></li>
                <li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Info</a></li>
                <li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Warn</a></li>
                <li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Error</a></li>
            </ul>
            <br />
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="t1">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div style="overflow-y: auto; overflow-x: auto; height: 600px" id="Debug">

                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="t2">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div style="overflow-y: auto; overflow-x: auto; height: 600px" id="Info">

                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="t3">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div style="overflow-y: auto; overflow-x: auto; height: 600px" id="Warn">

                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="t4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div style="overflow-y: auto; overflow-x: auto; height: 600px" id="Error">

                            </div>
                        </div>
                    </div>.
                </div>
            </div>

        </div>


    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var maxid = 0;
        var logger = '';
        var serverName = '';
        var level = '';

        //开始获取记录,5秒
        getdata();
        setInterval("getdata();", 5 * 1000);

        function getdata() {
            $.ajax({
                url: '/home/data',
                data: 'logger=' + logger + '&level=' + level + '&serverName=' + serverName + '&id=' + maxid,
                dataType: 'json',
                success: function (data) {
                    maxid = data.MaxId;
                    for (var i = 0; i < data.Data.length; i++) {
                        console.log(data.Data[i].Message);
                        $('#' + data.Data[i].Level).prepend(
                            data.Data[i].Logged + '：' +
                            data.Data[i].Message + '<br/>');
                    }
                }

            });
        }
    </script>
</body>
</html>